<!-- 聊天列表 -->
<template>
  <div class="msglist">
    <ul>
        <li v-for="item in chatList" class="sessionList" :class="activeId == item.id ? 'active' : ''"
            @click="selectSession(item.id)" :key="item.id" v-if="item.lastMessage != null || item.id == activeId">
            <div class="list-left">
            	<img class="avatar"  width="42" height="42" :alt="item.nickname" :src="item.avatar">
            </div>
            <div class="list-right">
            	<p class="name">{{item.nickname}}</p>
                <span class="time">{{item.lastDate | time}}</span>
                <p class="lastMessage">{{item.lastMessage}}</p>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    data() {
        return {
            chatList: [],
            activeId: 0
        }
    },
    created() {
      this.getMessage();
      let id = this.$route.query.id
      console.log('chat id ' + id)
      if (id == undefined) {
          if (this.chatList.length > 0) {
              this.activeId = this.chatList[0].id
          }
      } else {
          this.activeId = id
      }

      // 监听消息
      this.$EventBus.$on('addSelfMessage', (msg) => {
          this.updateLastMessage({id: msg.to, content: msg.content, date: msg.time})
      })
      this.$EventBus.$on('ID' + 0x103, (msg) => {
          this.updateLastMessage({id: msg.from, content: msg.content, date: msg.time})
      })
    },
    methods: {
        getMessage() {
          let message = localStorage.getItem('chatList')
          if (message == undefined || message == null || message.indexOf('[') != 0) {
              message = "[]"
          }
          let array = JSON.parse(message)
          array = array.sort((a, b) => {
              return b.lastDate > a.lastDate ? 1 : -1;
          })
          this.chatList = []
          for (let i=0; i<array.length; i++) {
              this.chatList.push(array[i])
          }
        },
        saveMessage() {
            localStorage.setItem('chatList', JSON.stringify(this.chatList))
        },
        selectSession(id) {
            this.activeId = id
            this.$EventBus.$emit('chatSession', id)
        },
        updateLastMessage(msg) {
            let search = false
            for (let i=0; i<this.chatList.length; i++) {
                if (this.chatList[i].id == msg.id) {
                    this.chatList[i].lastDate = msg.date
                    this.chatList[i].lastMessage = msg.content
                    search = true
                }
            }
            localStorage.setItem('chatList', JSON.stringify(this.chatList))
        }
    },
    filters: {
        // 将日期过滤为 hour:minutes
        time (date) {
            if (date == null) {
                return '';
            }
            if (typeof date === 'string') {
                date = new Date(date);
            }
            if(date.getMinutes()<10){
                return date.getHours() + ':0' +date.getMinutes();
            }else{
                return date.getHours() + ':' + date.getMinutes();
            }
        }
    },
}
</script>

<style lang="stylus" scoped>
.msglist
  height: 540px
  overflow-y: auto
  .sessionList
    display: flex
    padding: 12px
    transition: background-color .1s
    font-size: 0
    &:hover
        background-color: rgb(220,220,220)
    &.active
        background-color: #c4c4c4
    .avatar
        border-radius: 2px
        margin-right: 12px
    .list-right
        position: relative
        flex: 1
        margin-top: 4px
	    .name
	        display: inline-block
	        vertical-align: top
	        font-size: 14px
	    .time
	        float: right
	        color: #999
	        font-size: 10px
	        vertical-align: top
        .lastMessage
            position: absolute
            font-size: 12px
            width: 130px
            height: 15px
            line-height: 15px
            color: #999
            bottom: 4px
            overflow: hidden
            white-space:nowrap
            text-overflow:ellipsis
</style>
